<template>
  <div class="singerNameList">
    <ul>
      <li v-for="item in singerName" :key="item.id"><a>{{item.name}}</a><a></a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "SingerNameList"
}
</script>

<script setup>
import { defineProps } from 'vue'

const props = defineProps(['singerName'])
console.log(props.singerName);
</script>

<style scoped>
.singerNameList{
  height: 540px;
  width: 100%;
  border-top: 1px dotted saddlebrown;
}
.singerNameList>ul{
  display: flex;
  flex-wrap: wrap;
}
.singerNameList>ul>li{
  display: flex;
  align-items: center;
  height: 30px;
  width: 20%;
  padding-left: 17px;
  box-sizing: border-box;
}
.singerNameList>ul>li>a{
  cursor: pointer;
}
.singerNameList>ul>li>a:first-of-type{
  white-space:nowrap; 
  text-overflow:ellipsis;
  overflow:hidden; 
}
.singerNameList>ul>li>a:first-of-type:hover{
  text-decoration: underline;
}
.singerNameList>ul>li>a:last-of-type{
  display: inline-block;
  width: 17px;
  height: 18px;
  background: url(https://s2.music.126.net/style/web2/img/icon.png?6ef008eaa455074f27505b3467e56f6b) no-repeat 0 9999px;
  background-position: 0 -740px;
  margin-left: 2px;
}
</style>